import React, { Component } from 'react'
import { Button, Table, Modal, Form, Input, message } from 'antd'
import { subject } from '../../../api//index'
import styles from './index.less'
export default class index extends Component {
    componentDidMount() {
        this.getData()
    }

    getData = async () => {
        const data = await subject.getSubjectList()
        if (data.code === 200) {
            this.setState({ list: data.data })
        }
    }
    state = {
        list: [],
        visible: false,
        data: {},
        loading: false,
        formRules: {
            coursenum: [
                {
                    required: true,
                    message: '课程数不能为空',
                },
            ],
            name: [
                {
                    required: true,
                    message: '科目名称不能未空',
                },
            ],
            sort: [
                {
                    required: true,
                    message: '科目序号不能为空',
                },
            ]
        },
    };

    showModal = (data) => {
        this.setState({
            visible: true,
            data
        }, () => {
            this.formNode.setFieldsValue(this.state.data)
        });
    }

    changeVisible = params => {
        this.setState({ visible: params })
    }

    handleOk = () => { //提交修改
        this.formNode.submit()
    };

    handleCancel = () => {
        this.setState({ visible: false })
    };

    submit = (values) => { //提交修改
        this.setState({ loading: true });
        subject.updateSubject(values).then(data => {
            if (data.code === 200) {
                this.getData()
                message.success('修改成功')
                this.setState({ visible: false })
            } else {
                message.error('修改失败')
            }
            this.setState({ loading: false });
        }).catch(err => {
            console.log('提交修改', err);
        })
    }


    render() {
        const { visible, loading, formRules, list } = this.state;
        const columns = [
            {
                title: '科目ID',
                dataIndex: 'id',
            },
            {
                title: '科目序号',
                dataIndex: 'sort',
            },
            {
                title: '科目名称',
                dataIndex: 'name',
            },
            {
                title: '课程数',
                dataIndex: 'coursenum',
            },
            {
                title: '操作',
                fixed: 'right',
                render: (item) => {
                    return <Button type='primary' onClick={() => this.showModal(item)}>修改</Button>
                }
            }
        ];
        return (
            <div id="subjectList">
                <Table rowKey='id' columns={columns} dataSource={list} />
                <Modal
                    maskClosable={false}
                    keyboard={false}
                    bodyStyle={{ paddingTop: '5px', paddingBottom: 0 }}
                    centered
                    visible={visible}
                    title="修改科目"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={this.handleOk} >
                            提交
                        </Button>,
                    ]}>

                    <Form onFinish={this.submit} ref={node => { this.formNode = node }} layout='vertical' ref={node => { this.formNode = node }}>
                        <Form.Item name='id' label='科目ID:'>
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item name='sort' rules={formRules.sort} label='科目序号:'>
                            <Input disabled={loading} />
                        </Form.Item>
                        <Form.Item name='name' rules={formRules.name} label='科目名称:'>
                            <Input disabled={loading} />
                        </Form.Item>
                        <Form.Item name='coursenum' rules={formRules.coursenum} label='课程数:'>
                            <Input disabled={loading} />
                        </Form.Item>
                    </Form>

                </Modal>
            </div>
        )
    }
}
